<template>
  <div class="registered">
    <van-nav-bar title="注册" left-arrow @click-left="goBack"></van-nav-bar>
    <div class="container">
      <van-form @submit="onSubmit">
        <van-field
          v-model="form.name"
          label="姓名"
          placeholder="请输入姓名"
          :border="false"
          :rules="[{ required: true, message: '请输入姓名' }]"
        />
        <van-field
          v-model="form.phone"
          label="手机号"
          placeholder="请输入手机号"
          :border="false"
          :rules="[{ required: true, message: '请输入手机号' }]"
        />
        <van-field
          v-model="form.password"
          type="password"
          label="密码"
          placeholder="请输入密码"
          :border="false"
          :rules="[{ required: true, message: '请输入密码' }]"
        />
        <van-field
          v-model="form.confirmPassword"
          type="password"
          label="确认密码"
          placeholder="请输入确认密码"
          :border="false"
          :rules="[{ required: true, message: '请输入确认密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "RegisteredIndex",
  data() {
    return {
      form: {
        name: "",
        phone: "",
        password: "",
        confirmPassword: "",
      },
    };
  },
  methods: {
    onSubmit() {
      console.log(this.form);
      if (this.form.password !== this.form.confirmPassword) {
        this.$toast("两次密码不一致");
        return;
      }
      this.$toast("注册成功");
      this.goBack();
    },
    goBack() {
      this.$router.push({
        path: "/login",
      });
    },
  },
};
</script>

<style>
</style>